<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Welkom op uw portaal van myHealth</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css" />

    <script type="text/javascript" src="static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="static/js/knockout-3.2.0.js"></script>
    <script type="text/javascript" src="static/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

<div class="page-header">
	<a name="top"></a>
    <h1><img src="static/img/logo.jpg"></h1>
	<div align="right"><a href="index.html">Log out</a>&nbsp;&nbsp;&nbsp; 
		 <img src="static/img/NL.png"> / <img src="static/img/EN.png">
	</div>
</div>

<!-- Collapsible Panels - START -->
<div class="navbar navbar-default">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
			<a class="navbar-brand" href="#">Uw metingen</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="active"><a href="#pressure">Bloeddruk</a></li>
            <li><a href="#pulse">Hartslag</font></a></li>
            <li><a href="#ecg">ECG</font></a></li>
        </ul>
		<ul class="nav navbar-nav navbar-right">
            <li><a href="landing.html">Terug naar home</a></li>
        </ul>
    </div>
</div>

<div class="container">
    <div class="text-center">
        <h1>Metingen</h1>
        <p class="lead">
			
            Op deze pagina kunt u een overzicht zien van de metingen die u heeft doorgegeven met de myHealth app. 
        </p>
    </div>
	    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="text-center"><strong><font color="#8CC63E"><a name="pressure"></a>Bloeddruk</font></strong></h3>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-condensed">
                            <thead>
                                <tr>
                                    <td><strong>Datum</strong></td>
                                    <td class="text-center"><strong>Bovendruk</strong></td>
									<td class="text-center"><strong>Onderdruk</strong></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>29/09/2014</td>
                                    <td class="text-center">134</td>
                                    <td class="text-center">78</td>									
                                </tr>
                                <tr>
                                    <td>28/09/2014</td>
                                    <td class="text-center">139</td>
                                    <td class="text-center">79</td>									
                                </tr>                             
                                <tr>
                                    <td>27/09/2014</td>
                                    <td class="text-center">144</td>
                                    <td class="text-center">85</td>									
                                </tr>
                            </tbody>
                        </table>
						<a href="#top">^ Terug</a>
                    </div>
                </div>
            </div>
        </div>
		<div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="text-center"><strong><font color="#8CC63E"><a name="pulse"></a>Hartslagmetingen</font></strong></h3>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-condensed">
                            <thead>
                                <tr>
                                    <td><strong>Datum</strong></td>
                                    <td class="text-center"><strong>Hartslagen per minuut</strong></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>29/09/2014 15:33</td>
                                    <td class="text-center">67</td>
                                </tr>
                                <tr>
                                    <td>28/09/2014 16:45</td>
                                    <td class="text-center">76</td>								
                                </tr>                             
                            </tbody>
                        </table>
						<a href="#top">^ Terug</a>
                    </div>
                </div>
            </div>
        </div>
		<div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="text-center"><strong><font color="#8CC63E"><a name="ecg"></a>ECG</font></strong></h3>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-condensed">
                            <thead>
                                <tr>
                                    <td><strong>Datum ingestuurd</strong></td>
                                    <td class="text-center"><strong>Datum vastgelegd</strong></td>
									<td class="text-center"><strong>Oordeel</strong></td>
									<td class="text-center"><strong>Verwijder</strong></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>29/09/2014 13:37</td>
                                    <td class="text-center">29/09/2014 12:58</td>
                                    <td class="text-center">Normaal</td>									
                                    <td class="text-center"><a href=""><b><font color="red">X</font></b><a></td>
								</tr>
                                  <tr>
                                    <td>28/09/2014 11:33</td>
                                    <td class="text-center">28/09/2014 12:00</td>
                                    <td class="text-center">Normaal</td>									
                                    <td class="text-center"><a href=""><b><font color="red">X</font></b><a></td>
								</tr>                            
                                  <tr>
                                    <td>27/09/2014 13:30</td>
                                    <td class="text-center">27/09/2014 12:58</td>
                                    <td class="text-center">Normaal</td>									
                                    <td class="text-center"><a href=""><b><font color="red">X</font></b><a></td>
								</tr>
                            </tbody>
                        </table>
						<a href="#top">^ Terug</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.panel-heading span {
    margin-top: -20px;
    font-size: 15px;
}
.row {
    margin-top: 40px;
    padding: 0 10px;
}
.clickable {
    cursor: pointer;
}    
</style>

<script type="text/javascript">
    jQuery(function ($) {
        $('.panel-heading span.clickable').on("click", function (e) {
            if ($(this).hasClass('panel-collapsed')) {
                // expand the panel
                $(this).parents('.panel').find('.panel-body').slideDown();
                $(this).removeClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
            }
            else {
                // collapse the panel
                $(this).parents('.panel').find('.panel-body').slideUp();
                $(this).addClass('panel-collapsed');
                $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
            }
        });
    });
</script>

<!-- Collapsible Panels - END -->

</div>

</body>
</html>